<template>
    <div>
        <van-skeleton title :row="18" :loading="loading">
            <div>
                <van-swipe :autoplay="3000" lazy-render>
                    <van-swipe-item style="height:300px;width:100%">
                        <img style="width:100%" :src="data.photo" />
                    </van-swipe-item>

                </van-swipe>
            </div>
            <div style="padding: 10px;">
                <div>
                    <b style="color: red;">￥{{ data.price }}</b>
                    <van-tag style="float: right;" type="danger">销量:{{ data.sales }}</van-tag>
                </div>
                <div>
                    <div>
                        <p></p>
                        <span>{{ data.name }}</span> <van-tag color="dimgray" style="margin-left: 5px;" plain>{{
                            result == "" ? "无类型" : result }}</van-tag>
                        <p style="color:dimgray"> {{ data.specs }}</p>
                    </div>
                    <div>
                        <van-tag color="dimgray" plain>生产日期:{{ data.birthday }}</van-tag>
                        <van-tag style="margin-left: 5px;" color="dimgray" plain>保质期:{{ data.expiryday }}天</van-tag>
                        <van-button style="float: right;width: 50px;" @click="show1 = true" size="mini" plain
                            type="primary">更新</van-button>
                        <van-popup v-model:show="show1" position="bottom" :style="{ height: '25%' }">
                            <div
                                style="margin-top: 10px;padding: 10px; border-bottom: 1px solid #EEE;padding-bottom: 20px;">
                                <div>
                                    <van-cell title="生产日期" v-if="show3 == false" is-link :value="data.birthday"
                                        @click="show2 = true" />
                                    <van-cell title="生产日期" is-link :value="date2" v-if="show3 == true"
                                        @click="show2 = true" />
                                    <van-calendar v-model:show="show2" @confirm="onConfirm" :min-date="minDate" style="height: 55vh;"
                                        :max-date="maxDate" />
                                </div>
                                <div>
                                    <van-cell-group inset>
                                        <van-field style="margin-left: -16px;" v-model="value3" label="保质期(天数)"
                                            placeholder="保质期" />
                                    </van-cell-group>
                                </div>
                            </div>
                            <div style="padding: 10px;">
                                <van-button type="primary" @click="xiugai()"
                                    style="width: 98%;margin-top: 10px;">修改</van-button>
                            </div>
                        </van-popup>
                    </div>
                    <div>
                        <p style="color:dimgray;font-size: 13px;"> {{ data.explain }}</p>
                    </div>
                    <div>
                        <b style="color: dimgray;font-size: 13px ">剩余库存：{{ data.inventory }}</b>
                        <van-tag v-if="data.isShelve != 1" style="float: right;" type="danger">未上架</van-tag>
                        <van-tag v-if="data.isShelve == 1" style="float: right;" type="primary">上架中</van-tag>
                    </div>
                </div>
            </div>
            <div class="goods">
                <div style="border-bottom: 1px solid #EEE;padding-bottom: 5px;">
                    <van-cell title="查看资质" @click="zizhi(data.id)" icon="search" is-link />
                </div>
                <div style="padding: 10px;">
                    <div>
                        <van-button style="width: 48%;" @click="show = true" type="primary">补货</van-button>
                        <van-popup v-model:show="show" position="bottom" :style="{ height: '20%' }">
                            <div
                                style="margin-top: 10px;padding: 10px; border-bottom: 1px solid #EEE;padding-bottom: 20px;">
                                <span>补货数量</span>
                                <van-stepper style="float: right;margin-right: 10px;" input-width="80px"
                                    button-size="32px" v-model="value" step="100" />
                            </div>
                            <div style="padding: 10px;">
                                <van-button type="primary" @click="buhuo()"
                                    style="width: 98%;margin-top: 10px;">补货</van-button>
                            </div>
                        </van-popup>
                        <van-button style="width: 48%;margin-left: 8px;" @click="genggailerixin = true"
                            type="warning">更改类型</van-button>
                        <van-popup v-model:show="genggailerixin" position="bottom" :style="{ height: '20%' }">
                            <div
                                style="margin-top: 10px;padding: 10px; border-bottom: 1px solid #EEE;padding-bottom: 20px;">
                                <van-field v-model="result1" is-link readonly name="picker" label="商品类型"
                                    placeholder="请选择商品类型" @click="showPicker = true" />
                                <van-popup v-model:show="showPicker" position="bottom">
                                    <van-picker :columns="columns" @confirm="onConfirm1" @cancel="showPicker = false" />
                                </van-popup>
                            </div>
                            <div style="padding: 10px; margin-top: -20px;">
                                <van-button type="warning" @click="leixinxiugai()"
                                    style="width: 98%;margin-top: 10px;">修改</van-button>
                            </div>


                        </van-popup>
                    </div>
                    <div>
                        <van-button type="danger" v-if="data.isShelve == 1" @click="goodsShelve1()"
                            style="width: 98%;margin-top: 10px;">下架</van-button>
                        <van-button type="success" v-if="data.isShelve != 1" @click="goodsShelve1()"
                            style="width: 98%;margin-top: 10px;">上架</van-button>
                    </div>
                </div>
            </div>
        </van-skeleton>
    </div>
</template>

<script>
import { useRoute, useRouter } from 'vue-router';
import {
    getSingleSupplierGoods,
    goodsShelve,
    supplierBuhuo,
    updateBirthday,
    getGoodsTypes,
    updateGoodsType,
    deleteGoods,
} from "../api/goods";
import { reactive, toRefs, ref } from 'vue';
import { showNotify, showConfirmDialog } from 'vant';

export default {
    setup() {
        const route = useRoute();
        const route1 = useRouter();
        const zizhi = (val) => {
            route1.push('/shangpin/zizhi?id=' + val)
        }
        const date = reactive({
            show1: ref(false),
            show3: ref(false),
            data: [],
            show: false,
            loading: true,
            value: ref(100),
            value3: ref(''),
            genggailerixin: ref(false),
            result: ref(''),
            result1: ref(''),
            text: ref(''),
            columns: [
                { text: '', value: '' },
                { text: '', value: '' },
                { text: '', value: '' },
                { text: '', value: '' },
                { text: '', value: '' },
                { text: '', value: '' },
            ]
        })
        const showPicker = ref(false);
        const fieldValue = ref('');        
        const onConfirm1 = ({ selectedOptions }) => {
            date.result1 = selectedOptions[0]?.text;
            fieldValue.value = selectedOptions[0].value;
            showPicker.value = false;
        };
        const date2 = ref('');
        const show2 = ref(false);
        const formatDate = (date2) => `${date2.getFullYear()}-${date2.getMonth() + 1}-${date2.getDate()}`;
        const onConfirm = (value) => {
            date.show3 = true
            show2.value = false;
            date2.value = formatDate(value);
            console.log(date2.value);
        };

        const xiugai = () => {
            showConfirmDialog({
                title: '提示',
                message:
                    '确定要修改嘛？',
            }).then(() => {
                updateBirthday({
                    id: route.query.id,
                    birthday: date2.value != "" ? date2.value : date.data.birthday,
                    expiryday: date.value3 != "" ? date.value3 : date.data.expiryday,
                }).then((res) => {
                    getSingleSupplierGoods1();
                    showNotify({ type: 'success', message: res.message });
                    date.show1 = false
                })
            })
                .catch(() => {
                    // on cancel
                });

        }
        const getSingleSupplierGoods1 = () => {
            getSingleSupplierGoods({
                id: route.query.id
            }).then((res) => {
                getGoodsTypes({}).then((res1) => {
                    res1.data.map((i, s) => {
                        if (i.id == res.data.type) {
                            date.result = i.name
                            date.result1 = i.name
                        }
                    })
                    res1.data.forEach((i,s) => {
                        date.columns[s].text = i.name;
                        date.columns[s].value = i.id;
                    });
                })
                date.text = res.data.id
                date.data = res.data
                date.value3 = res.data.expiryday
                setTimeout(() => { 
                    date.loading = false
                },1200)
            })
        }
        const leixinxiugai = () => {
            showConfirmDialog({
                title: '提示',
                message:
                    '确定要修改嘛？',
            }).then(() => {
                updateGoodsType({
                    id: date.text,
                    type: fieldValue.value,
                }).then((res) => {
                    getSingleSupplierGoods1();
                    showNotify({ type: 'success', message: res.message });
                    date.genggailerixin = false
                })
            })
                .catch(() => {
                    // on cancel
                });

        }
        const buhuo = () => {
            showConfirmDialog({
                title: '提示',
                message:
                    '确定补货嘛？',
            })
                .then(() => {
                    supplierBuhuo({
                        id: route.query.id,
                        number: date.value
                    }).then((res) => {
                        getSingleSupplierGoods1();
                        showNotify({ type: 'success', message: res.message });
                        date.show = false
                    })
                })
                .catch(() => {
                    // on cancel
                });

        }
        const goodsShelve1 = () => {
            goodsShelve({
                id: route.query.id
            }).then((res) => {
                showNotify({ type: 'success', message: res.message });
                console.log(res, 'res');
                getSingleSupplierGoods1();
            })
        }
        getSingleSupplierGoods1();
        return ({
            zizhi,
            leixinxiugai,
            showPicker,
            onConfirm1,
            xiugai,
            date2,
            show2,
            onConfirm,
            ...toRefs(date),
            goodsShelve1,
            getSingleSupplierGoods1,
            buhuo,
            minDate: new Date(2024, 0, 1),
            maxDate: new Date(2024, 12, 31),
        });
    },
};
</script>

<style scoped>
.goods {
    width: 95%;
    margin-top: 5px;
    margin-left: 5px;
    border: 1px solid #eee;
    padding: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.12);
}
</style>
